import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button, Input, Form, Image } from '@tarojs/components'
import './index.less'

import Dialog from '../../components/Dialog'
import { serialize } from '../../utils'
import { rssSubscribe } from '../../api'


export default class Index extends Component {

  state = {
    show: false,
    rssTitle: '',
    rssUrl: '',
    rssIndex: -1,
    list: [{
      "title": "威锋网", "desc": "果粉大本营",
      "url": "https://www.huxiu.com/rss/0.xml", "isSubscribe": true
    }, { "title": "极客公园", "desc": "环球网", "url": "http://www.geekpark.net/rss", "isSubscribe": true }, { "title": "环球网-互联网＋", "desc": "环球网", "url": "http://rss.huanqiu.com/tech/internet.xml?agt=15438", "isSubscribe": true }]
  }

  componentWillMount() {
   

  }
  componentDidShow(){
   
    const my_subscribe = Taro.getStorageSync('my_subscribe') || []
    this.setState({
      list: my_subscribe
    })
  }
  componentDidMount() { 
   
  }

  componentWillUnmount() { }



  componentDidHide() { }
  onClose() {
    this.setState({
      show: false
    })
  }
  onOpen() {

    this.setState({
      rssTitle: '',
      rssUrl: '',
      show: true
    })
  }
  onSave() {
    const item = {
      title: this.state.rssTitle,
      url: this.state.rssUrl,
      // url:this.state., 
    }
    rssSubscribe({
      rssUrl:this.state.rssUrl
    })
    // 
    // Taro.cloud.callFunction({
    //   name:'rssSubscribe',
    //   data:{
    //     
    //   }
    // })
    // { "title": "威锋网", "desc": "果粉大本营", "url": "https://www.huxiu.com/rss/0.xml", "isSubscribe": true }, { "title": "极客公园", "desc": "环球网", "url": "http://www.geekpark.net/rss", "isSubscribe": true }, { "title": "环球网-互联网＋", "desc": "环球网", "url": "http://rss.huanqiu.com/tech/internet.xml?agt=15438", "isSubscribe": true }
    const { list } = this.state
    if (this.state.rssIndex > -1) {
      list[this.state.rssIndex] = item
    } else {
      list.push(item)
    }

    this.setList(list)
    this.onClose()

  }
  config = {
    navigationBarTitleText: '首页'
  }
  onLongPress(item, index) {
    const { list } = this.state
    Taro.showActionSheet({
      itemList: ['编辑', '删除']
    }).then(({ tapIndex }) => {
      if (tapIndex == 0) {
        this.setState({
          show: true,
          rssIndex: index,
          rssTitle: item.title,
          rssUrl: item.url,
        })
      } else if (tapIndex == 1) {
        console.log('删除', item)

        list.splice(index, 1)
        this.setList(list)
      }

    })
  }
  setList(list) {
    this.setState({
      list: [...list]
    })
    Taro.setStorageSync('my_subscribe', list)
  }
  toList(item) {

    Taro.navigateTo({
      url: '/pages/list/index?' + serialize(item),
      // events:
    })
  }
  onShareAppMessage() {
    return {
      title: 'RSS阅读器',
      desc: '提升阅读效率',
      imageUrl: require('../../assets/img/title.jpg'),
      path: '/pages/index/index'
    }
  }
  render() {
    const { list } = this.state
    return (
      <View className='index'>
        <Dialog
          onClose={() => this.onClose()}
          title='添加RSS' show={this.state.show}
        >
          <Form className='form'>
            <View className='cu-form-group'>
              <View className='title'>标题:</View>
              <Input value={this.state.rssTitle} onChange={(e) => this.setState({
                rssTitle: e.target.value
              })} placeholder='请输入标题'
              />
            </View>
            <View className='cu-form-group '>
              <View className='title'>链接:</View>
              <Input value={this.state.rssUrl} onChange={(e) => this.setState({
                rssUrl: e.target.value
              })} placeholder='请输入链接 '
              />
            </View>
            <View className='cu-bar bg-white justify-end '>
              <View className='action'>
                <Button onClick={() => this.onClose()} className='cu-btn text-green margin-left'>取消</Button>
                <Button onClick={() => this.onSave()} className='cu-btn bg-green margin-left'>确定</Button>
              </View>
            </View>
          </Form>


        </Dialog>
        <View className='counter-warp'>
          <View className='cu-bar bg-white'>
            <View className='action'>操作</View>
            <View className='action'>
              <Button
                onClick={() => this.onOpen()}
                className='cu-btn bg-green round sm button-hover'
              >添加</Button></View>

          </View>
          <View className='cu-bar bg-white solid-bottom margin-top'>
            <View className='action'>
              <Text className='cuIcon-titles lg  text-green'></Text>
              列表
              
              <Text className='text-sm text-grey'>(长按编辑删除)</Text>
      </View>
          </View>
          <View className='cu-list  menu-avatar menu'>
            {
              list.length < 1 ?

                <View className='text-center text-grey cu-item'  >你还没有添加任何订阅，点击上方“添加”按钮添加自定义订阅或到订阅分类查看添加。</View>
                :
                list.map((item, index) => {


                  return <View
                    onClick={() => this.toList(item)}
                    key={index} className='cu-item arrow'
                    onLongPress={() => this.onLongPress(item, index)}
                
                  >



                    <View

                      className='bg-white cu-avatar round lg'
                    >
                      <Image className='img' src={require('../../assets/img/rss.png')}></Image>
                    </View>
                    <View className='content'>
                      {item.title}
                      <View className='text-grey' ></View>
                      <View className='text-gray text-sm'>{item.desc}
                      </View>
                    </View>
                    <View className='action'>

                    </View>

                  </View>
                })


            }

          </View>

        </View>
        <Ad unit-id='adunit-275d29f4b149d02f'></Ad>
      </View>
    )
  }
}
